<template>
  <div>
    <el-dialog
      :title="'批量设置有效期限'"
      :visible.sync="dialogVisible"
      width="450px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-alert
        title="输入0则不设置有效期"
        type="warning"
        center
        show-icon
        :closable="false"
        style="margin-bottom: 20px"
      >
      </el-alert>
      <el-form
        :model="addForm"
        :rules="rules"
        ref="refForm"
        label-width="120px"
      >
        <el-form-item size="small" label="有效期限（月）" prop="serviceType">
          <el-autocomplete
            clearable
            @clear="clearAlarmFactor"
            v-model="addForm.inDate"
            :fetch-suggestions="querySearch"
            placeholder="请输入有效期限"
            @select="handleSelect"
            style="width: 100%"
            :maxlength="2"
            @input="validateInput"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqBatchInDate } from "@api/api.js";
import { mapState } from "vuex";

export default {
  props: ["idList"],
  data() {
    return {
      dialogVisible: false,
      addForm: {
        inDate: "",
      },
      rules: {
        inDate: [
          {
            required: true,
            message: "请输入有效期限",
            trigger: ["blur", "change"],
          },
        ],
      },
      restaurants: [],
      previousValidValue: "", // 用于保存上一个有效值
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {},
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    validateInput(e) {
      let value = e.replace(/[^\d]/g, ""); // 只能输入数字
      value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      this.addForm.inDate = value;
    },
    handleSelect(item) {
      //   console.log(item);
    },
    // 清除告警因素
    clearAlarmFactor() {
      this.restaurants = this.loadAll();
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "12" },
        { value: "24" },
        { value: "36" },
        { value: "48" },
      ];
    },
    // 点击绑定
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return;
        let { inDate } = this.addForm;
        // 批量下发
        const res = await reqBatchInDate({
          inDate,
          idList: this.idList,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("批量设置有效期限成功！");
        this.$parent.clearSelections(); //清空复选框
        this.$parent.getDataList();
        this.closeDialog();
      });
    },
    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();
      this.dialogVisible = false;
      this.addForm = {
        inDate: "",
      };
    },
  },
  deactivated() {
    if(this.$refs.refForm!=null){
      this.closeDialog();
    }
  },
};
</script>

<style lang="less" scoped>
// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 2016;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 下拉框加载结束
</style>
